{% extends 'base.html.twig' %}

{% block CTA %}

{% endblock %}
 {% block sidebar %}
     <div id="favorite-Container" class="mb-3">
         <h5 class="text-left"><b>{{ 'favorite.sidebar.title'|trans }}</b></h5>

         {% if favorite|length > 0 %}
             {% for r in favorite %}
                 {% if r in runningRooms %}
                     {% include'dashboard/widget/__favoriteRoom.html.twig' with {'room':r} %}
                 {% endif %}
             {% endfor %}
             {% for r in favorite %}
                 {% if r not in runningRooms %}
                     {% include'dashboard/widget/__favoriteRoom.html.twig' with {'room':r} %}
                 {% endif %}
             {% endfor %}
         {% else %}
             <p>{% trans %}favorite.sidebar.help{% endtrans %}</p>
         {% endif %}
     </div>

 {% endblock %}

{% block body %}


    <!-- Tabs navs -->
    <div class="d-block">
        <ul class="nav-mat nav-mat-tabs mb-3 " id="ex1" data-swipe="#ex1-content">
            <li class="nav-mat-item mat-active ripple">
                <a
                        class="nav-mat-link"
                        id="ex1-tab-1-tab"

                        href="#ex1-tabs-1"
                        role="tab"
                        aria-controls="ex1-tabs-1"
                        aria-selected="true"
                ><i class="fas fa-calendar"></i> <span
                            class="d-none d-lg-block">{{ 'Zukünftige Konferenzen'|trans }}</span></a>
            </li>
            <li class="nav-mat-item ripple">
                <a
                        class="nav-mat-link"
                        id="ex1-tab-3-tab"

                        href="#ex1-tabs-3"
                        role="tab"
                        aria-controls="ex1-tabs-3"
                        aria-selected="true"
                ><i class="fas fa-thumbtack"></i><span
                            class="d-none d-lg-block"> {{ 'Feste Konferenzen'|trans }}</span></a>
            </li>
            <li class="nav-mat-item ripple">
                <a
                        class="nav-mat-link"
                        id="ex1-tab-2-tab"

                        href="#ex1-tabs-2"
                        role="tab"
                        aria-controls="ex1-tabs-2"
                        aria-selected="false"
                ><i class="fas fa-history"></i><span
                            class="d-none d-lg-block"> {{ 'Vergangene Konferenzen'|trans }}</span></a>
            </li>
        </ul>
    </div>


    <!-- Tabs navs -->

    <!-- Tabs content -->
    <div class="d-flex flex-wrap w-100 m-0">
        {% if input_settings_allow_sheduling == 1 %}
            <div class="col-12 col-md-6 flex-fill mb-3 p-0 pe-md-1 ps-md-1">
                <div class="btnGroup">
                    <a href="{{ path('room_new') }}"
                       class="loadContent dashboardBtn btn-block btn-primary btn btn-dashboard"
                       id="createNewConference">
                        {{ 'Eine Konferenz planen'|trans }}
                    </a>
                    {% if publicServer is defined and publicServer is not null %}
                        <a href="{{ path('app_create_fast_confernce') }}"
                           class=" loadInMultiframe dashboardBtn btn-block btn-primary btn btn-dashboard"
                           id="createNewFastConference">
                            {{ 'Sofort Konferenz'|trans }}
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endif %}

        {% if input_settings_allow_roomPlanning == 1 %}
            <div class="col-12 col-md-6 flex-fill mb-3 p-0 pe-md-0 ps-md-1">
                <a href="{{ path('schedule_admin_new') }}"
                   class="loadContent dashboardBtn btn-block btn btn-outline-primary btn-dashboard">
                    {{ 'Einen Termin finden'|trans }}
                </a>
            </div>
        {% endif %}
    </div>

    <div class="tab-content" id="ex1-content" data-swipe="#ex1">
        <div class="tab-content-watch mat-active">
            <div
                    class="tab-pane fade show mat-active"
                    id="ex1-tabs-1"
                    aria-labelledby="ex1-tab-1"
            >

                {% if myScheduledMeeting(app.user)|length > 0 %}

                    <h4 style="padding-top: 16px" class="h4-responsive pl-xl-3"> {{ 'Einen Termin finden'|trans }}</h4>
                    {% for r in myScheduledMeeting(app.user) %}
                        {% include 'dashboard/__roomCard.html.twig' with {'room':r} %}
                    {% endfor %}
                {% endif %}
                <hr>
                <h4 style="padding-top: 16px"
                    class="h4-responsive pl-xl-3">{{ 'Meine Videokonferenzen'|trans }} </h4>
                {% if  roomsFuture |length == 0 %}
                    <div class="card card-body">
                        <p class="text-center">
                            {% trans with {'{url}':path('room_new')} %}dashboard.noconference{% endtrans %}
                        </p>
                    </div>
                {% elseif todayRooms |length == 0 %}
                    <h4 style="padding-top: 16px" class="h4-responsive pl-xl-3">{{ 'Heute'|trans }} </h4>
                    <div class="card card-body">
                        <p class="text-center">{{ 'Heute steht keine Jitsi Meet Konferenz an.'|trans }}</p>
                    </div>
                {% endif %}
                {% set locale =  app.request.locale %}
                {% for date in roomsFuture %}
                    <h4 style="padding-top: 16px" class="day h4-responsive pl-xl-3">
                        {% if today|date('Y-m-d',false) == date[0].startwithTimeZone(app.user)|date('Y-m-d',false) %}
                            {{ 'Heute'|trans }}
                        {% elseif tomorrow|date('Y-m-d',false) == date[0].startwithTimeZone(app.user)|date('Y-m-d',false) %}
                            {{ 'Morgen'|trans }}
                        {% else %}
                            {#                            {{ dump(date[0].startwithTimeZone(app.user)) }} #}
                            {#                            {{ dump(date[0].startwithTimeZone(app.user)|format_date(pattern="EEEE",locale=locale, timezone=null)) }} #}
                            {{ date[0].startwithTimeZone(app.user)|format_date(pattern="EEEE",locale=locale, timezone=null) }},
                            {{ date[0].startwithTimeZone(app.user)|format_datetime('long', 'none', locale=locale, timezone=null) }}
                        {% endif %}
                    </h4>
                    {% for room in date %}
                        {% include 'dashboard/__roomCard.html.twig' with {'room':room} %}
                    {% endfor %}
                {% endfor %}


            </div>
        </div>
        <div class="tab-content-watch">
            <div class="tab-pane fade" id="ex1-tabs-2" aria-labelledby="ex1-tab-2">
                <div id="ex1-tabs-2-init">
                    {% if roomsPast |length == 0 %}
                        <div class="card card-body">
                            <p class="text-center">{{ 'Aktuell sind keine vergangenen Konferenzen vorhanden.'|trans }}</p>
                        </div>
                    {% endif %}
                    {% for room in roomsPast %}
                        {% include 'dashboard/__roomPast.html.twig' with {'room':room} %}
                    {% endfor %}
                </div>
                <div class="lazyLoad mb-3" data-target="{{ path('dashboard_lazy',{'type':'past','offset':1}) }}">

                    <div class="fa-3x text-center text-black-50"><i class="fas fa-spinner fa-spin"></i></div>
                </div>
            </div>
        </div>
        <div class="tab-content-watch">
            <div class="tab-pane fade" id="ex1-tabs-3" aria-labelledby="ex1-tab-3">

                <h4 style="padding-top: 16px" class="h4-responsive pl-xl-3">{{ 'Feste Konferenzen'|trans }} </h4>
                {% if persistantRooms|length > 0 %}
                    {% for r in persistantRooms %}
                        {% include 'dashboard/__roomCard.html.twig' with {'room':r} %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
    <!-- Tabs content -->


{% endblock %}
{% block javascripts %}
    <script>
        var topic ={{ mercure(['personal/'~app.user.uid])|json_encode(constant('JSON_UNESCAPED_SLASHES') b-or constant('JSON_HEX_TAG'))|raw }};
        var websocketTopics = "{{ getJwtforWebsocket(['personal/'~app.user.uid],app.user) }}";
        var websocketUrl = "{{ getUrlforWebsocket() }}";
    </script>
{% endblock %}